<script setup>
import { useRouter } from 'vue-router'
import { state } from '@/stores/localstorage'

//  useRouter 返回当前的router实例对象
const router = useRouter()
 console.log(router)

// 这个Login对象他不是一个响应式的数据
// 怎么把这Login对象变成一个响应式数据: 需要监听LocalStorge的key的变化？
// 这种组件已经有人写个了, Vue 专门的vue 社区共享库的网站 vue use
// VueUse基于Vue组合式API的实用工具集
 console.log(state)

const Logout = () => {
  state.value.isLogin = false
  router.push({name: "LoginPage"})
}
const Login = () => {
  router.push({name: "LoginPage"})
}
const JumpToFrontend = () => {
  router.push({name: "FrontendBlogList"})
}
const JumpToBackend = () => {
  router.push({name: "BackendBlogList"})
}
</script>

<template>
  <!-- 这是我们的根页面,所有的页面都需要嵌入到根页面才能成形出来, 特别是Vue Route的子页面 -->
  <div>
    <a-space>
      <!-- 导航区 -->
      <div class="nav">
        <!-- logo显示区 -->
        <div>Go11微博客系统</div>
        <!-- 登录操作区 -->
        <div class="to-backend">
          <a-space>
            <!-- 模板里面使用ref对象，不需要添加value -->
            <a-button v-if="state.isLogin" @click="JumpToBackend">后台管理</a-button>
            <a-button v-if="state.isLogin" @click="JumpToFrontend">前台浏览</a-button>
            <a-button v-if="state.isLogin" @click="Logout">退出</a-button>
            <a-button v-if="!state.isLogin" @click="Login">登录</a-button>
          </a-space>
        </div>
      </div>
    </a-space>

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <!-- 当前路由指向那个页面, Router View就显示那个页面的组件,
    Router View像一个指针，指向的是当前访问的路由页面 -->
    <div class="content">
      <router-view></router-view>
    </div>
    
  </div>
</template>

<style scoped>
.nav {
  padding: 0 8px;
  height: 45px;
  width: 100vw;
  display: flex;
  align-items: center;
  border-bottom: 2px solid rgb(229,230,235);
  background-color: #fff;
}

.to-backend {
  margin-left: auto;
}

.content {
  height: calc(100vh - 47px);
}

</style>
